<template>
    <div class="order-item">

            <img :src="imgH+item.img" alt="">
            <div class="info">
                <div class="name" v-if="item.goodsName">{{item.goodsName}}</div>
                <div class="name" v-if="item.name">{{item.name}}</div>
                <div class="sku-info"> {{item.skuName?item.skuName:'默认'}}</div>
                <div class="other">{{remark?remark:'好品质,好生活'}}</div>
                <div class="amounts">
                    <div class="price" v-if="item.nowPrice">¥{{item.nowPrice.toFixed(2)}}</div>
                    <div class="price" v-if="item.price">¥{{item.price.toFixed(2)}}</div>
                    <div class="quantity">x {{item.quantity}}</div>
                </div>
            </div>

        </div>

</template>

<script>
    export default {
        created(){

        },
        props:{
          item:Object
        },
        computed:{
            remark(){
                let remark = ''
                if(this.item.point&&this.item.point>0){
                    remark += this.item.point+'积分换购 '
                }
                if(this.item.coupon&&this.item.coupon>0){
                    remark += '可使用'+this.item.coupon+'优惠券'
                }
                return remark
            }
        },
        data(){
            return {
                imgH:process.env.VUE_APP_IMG_DOMAIN
            }
        }
    }
</script>

<style scoped lang="stylus">
    .order-item
        margin-top 10px
        padding 0 5px
        display flex
        align-items center
        img
            width 90px
            height 90px
            flex 0 0 90px
            border-radius 5px
        .info
            padding 6px 63px 6px 15px
            font-size 0
            position relative
            overflow hidden
            width 100%
            .name
                white-space nowrap
                text-overflow ellipsis
                overflow hidden
                color #4E3D07
                font-size 12px
                margin-bottom 12px
                line-height 12px
            .sku-info
                width fit-content
                color #A1A1A1
                font-size 11px
                padding 7px 8px
                background-color #FBFAFA
                line-height 11px
                margin-bottom 14px
                font-weight 300
            .other
                width fit-content
                background-color #FBDFD4
                font-size 10px
                font-weight 300
                color #F7895E
                padding 2px 4px
            .amounts
                text-align right
                font-size 0
                position absolute
                right 0
                top 6px
                .price
                    color #4E3D07
                    font-size 12px
                    line-height 12px
                    font-weight 300
                .quantity
                    color $font-color-light
                    font-size 12px
                    font-weight 300
                    margin-top 7px

</style>